<template>
  <div v-show="is_show_calendar" class="calendar">

    <div class="calendarMainBg">
      <div class="c_m_top">
        <div class="Le">

          <div class="c_m_top_Le_top">
            <div class="c_m_top_Le_top_main">
                <dl class="btn">
                  <dt @click="c_Year(-1)">
                    <img src="@/assets/img/date/prev_year.png" alt="">
                  </dt>
                  <dd @click="c_Month(-1)">
                    <img src="@/assets/img/date/prev_month.png" alt="">
                  </dd>
                </dl>

                <h3>
                  {{year}}年&nbsp;{{month}}月
                </h3>

                <dl class="btn">
                  <dt @click="c_Month(1)">
                    <img src="@/assets/img/date/next_month.png" alt="">
                  </dt>
                  <dd @click="c_Year(1)">
                    <img src="@/assets/img/date/next_year.png" alt="">
                  </dd>
                </dl>
            </div>

          </div>
          <div class="c_m_top_Le_bot">
            <ul class="week">
              <li><span>一</span></li>
              <li><span>二</span></li>
              <li><span>三</span></li>
              <li><span>四</span></li>
              <li><span>五</span></li>
              <li><span>六</span></li>
              <li><span>日</span></li>
            </ul>
            <ul class="day">

              <li class="not_cur_month" v-for="(prev_m_day_It,prev_m_day_Idx) in (week-1)">
                <div class="prev_month_day_box">
                  <span>
                     {{prevMonthDayNum-(week-1)+prev_m_day_It}}
                  </span>
                </div>
              </li>

              <li :class="{'day_ac':dayIt==cur_dayIdx}" v-for="(dayIt,dayIdx) in days">
                <div class="day_box">
                  <span @click="handleDay(dayIt)">
                      {{dayIt}}
                  </span>
                </div>
              </li>

              <li class="not_cur_month" v-for="(next_m_day_It,next_m_day_Idx) in (42-(days+week-1))">
                <div class="next_month_day_box">
                  <span>
                      {{next_m_day_It}}
                  </span>
                </div>
              </li>

            </ul>
          </div>

        </div>

        <div class="Ri">
          <div class="c_m_top_Ri_top">
            <span>
              {{cur_hour_Idx<=9?"0"+cur_hour_Idx:cur_hour_Idx}}:{{cur_second_Idx<=9?"0"+cur_second_Idx:cur_second_Idx}}
            </span>
          </div>
          <div class="c_m_top_Ri_bot">
            <div class="c_m_t_r_b_Box bor_r">
              <ul>
                <li :class="{'li_ac':cur_hour_Idx==hour_Idx}"
                v-for="(hour_It,hour_Idx) in 24"
                :key="'hour_It_0'+hour_Idx"
                @click="setVal('cur_hour_Idx',hour_Idx)"><span>{{hour_Idx<=9?"0"+hour_Idx:hour_Idx}}</span></li>
              </ul>

            </div>
            <div class="c_m_t_r_b_Box">
              <ul>
                <li :class="{'li_ac':cur_second_Idx==second_Idx}"
                v-for="(second_It,second_Idx) in 60"
                :key="'second_It_0'+second_Idx"
                @click="setVal('cur_second_Idx',second_Idx)"><span>{{second_Idx<=9?"0"+second_Idx:second_Idx}}</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="c_m_bot">
        <div class="c_m_bot_btn" @click="sub_date">
          确定
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  // https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/122592650
  export default {
    data(){
      return{
        cur_hour_Idx:0,
        cur_second_Idx:0,
        curTime:null,
        year:null,
        month:null,
        week:1,
        days:null,
        cur_dayIdx:null,
        prevMonthDayNum:null,
        timeObj:{},
        is_show_calendar:false,
        inpNum:null
      }
    },
    computed:{
      setDay(val){
        return (val)=>{
          return (val>=this.week?(val-this.week+1):"")&&(val<=(this.days+this.week)?(val-this.week+1):"");
        }
      }
    },
    mounted() {
      let that=this;
    },
    methods:{
      operateFn(x,y,z){
        let that=this;
        that.inpNum=x;
        that.is_show_calendar=y;
        //console.log("inpNum:",that.inpNum);
        if(z){
          that.cur_dayIdx=new Date().getDate();
          //console.log("cur_dayIdx:",that.cur_dayIdx);
          that.initDate(new Date());
        }
      },

      sub_date(){
        let that=this;
        that.is_show_calendar=false;
        that.tj_data();
      },

      tj_data(){
        let that=this;
        that.timeObj["Y"]=that.year;
        that.timeObj["M"]=that.month;
        that.timeObj["D"]=that.cur_dayIdx;
        that.timeObj["H"]=that.cur_hour_Idx;
        that.timeObj["Min"]=that.cur_second_Idx;
        that.timeObj["timeStamp"]=Number(new Date(that.year, that.month, that.cur_dayIdx, that.cur_hour_Idx, that.cur_second_Idx));
        //console.log("timeObj_123:",that.timeObj);
        this.$parent.getDate(that.inpNum,that.timeObj);
      },
      handleDay(x){
        let that=this;
        if(x){
          that.cur_dayIdx=x;
        }
        that.tj_data();
      },
      setVal(key,val){
        let that=this;
        that[key]=val;
        that.tj_data();
      },
      initDate(val){
        let that=this;
        that.curTime=val;
        //console.log("that.curTime:",that.curTime);
        that.year=that.curTime.getFullYear();
        that.month=that.curTime.getMonth()+1;
        that.week=new Date(that.year,that.month-1,1).getDay(); // getDay() 当月1号是星期几
        if(that.week==0){
          that.week=7;
        }
        that.days=new Date(that.year,that.month,0).getDate(); // getDate() 返回一个月中的某一天 0表示上个月也就是month的最后一天是几号
        that.prevMonthDayNum=new Date(that.year,that.month-1,0).getDate();
        that.year=that.curTime.getFullYear();
        console.log("年：",that.year,"月：",that.month+1,"星期"+that.week);
        that.tj_data();
      },
      c_Month(val){
        let that=this;
        that.month=(that.month-1)+val;
        console.log("month:",that.month);
        that.initDate(new Date(that.year,that.month));
        that.handleDay();
      },
      c_Year(val){
        let that=this;
        that.year=that.year+val;
        console.log("year:",that.year,"月：",that.month);
        that.initDate(new Date(that.year,(that.month-1)));
        that.handleDay();
      }
    }
  }
</script>

<style lang="less" scoped>
  .calendar{
    position: absolute;
    top: 36px;
    left: 0;
    width: 394px;
    z-index: 6;
    padding:10px 0;
    .calendarMainBg{
      background-color: #fff;
      border-radius: 6px;
      box-shadow: 0 0 6px #ddd;
      display: flex;
      flex-direction: column;
      .c_m_top{
        display:flex;
        flex-direction: row;
        border-bottom: 1px solid #f0f0f0;
        .Le{
          width: 280px;
          border-right: 1px solid #f0f0f0;
          .c_m_top_Le_top{
            border-bottom: 1px solid #f0f0f0;
            .c_m_top_Le_top_main{
              height: 40px;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              padding: 0 10px;
              .btn{
                display: flex;
                flex-direction: row;
                img{
                  display: block;
                  cursor: pointer;
                  margin: 0 5px;
                }
              }

              h3{
                color: #262626;
                font-size: 15px;
                height: 40px;
                line-height: 40px;
                font-weight: normal;
              }
            }

          }
          .c_m_top_Le_bot{
            padding:10px 15px;
            .week{
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              li{
                width:25px;
                margin: 3px 6px;
                //margin: 3px;
                span{
                  display: block;
                  color: #595959;
                  font-size:12px;
                  height: 25px;
                  line-height: 25px;
                  text-align: center;
                }
              }
            }
            .day{
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              li{
                width:25px;
                height: 25px;
                margin: 3px 5.3px;
                .day_box{
                  width:25px;
                  height: 25px;
                  span{
                    display: block;
                    color: #595959;
                    font-size: 14px;
                    height: 25px;
                    line-height: 25px;
                    text-align: center;
                    transition: .3s;
                    cursor: pointer;
                  }
                  span:hover{
                    color: #fff;
                    background-color: #f47920;
                  }
                }
                .prev_month_day_box,.next_month_day_box{
                  width:25px;
                  height: 25px;
                  span{
                    display: block;
                    color: #ccc;
                    font-size: 14px;
                    height: 25px;
                    line-height: 25px;
                    text-align: center;
                    transition: .3s;
                  }
                }
              }

              .day_ac{
                span{
                  color: #fff !important;
                  background-color: #f47920;
                }
              }
            }
          }
        }
        .Ri{
          width: 113px;
          display: flex;
          flex-direction: column;
          .c_m_top_Ri_top{
            border-bottom: 1px solid #f0f0f0;
            height: 40px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            span{
              display: block;
              color: #262626;
              font-size: 14px;
              line-height: 20px;
              height: 20px;
            }
          }
          .c_m_top_Ri_bot{
            display: flex;
            flex-direction: row;
            flex: 1;
            .c_m_t_r_b_Box{
              flex: 1;
              display: flex;
              flex-direction: column;
              overflow: hidden;
              ul{
                height: 237px;
                overflow-y: auto;
                li{
                  cursor: pointer;
                  span{
                    display: block;
                    height: 30px;
                    line-height: 30px;
                    color: #262626;
                    font-size: 14px;
                    text-align: center;
                  }
                }

                li:hover span{
                  background-color: #f5f5f5;
                }

                .li_ac{
                  span{
                    background-color: #fff8ed !important;
                    //color: #fff;
                  }
                }
              }
            }

            .c_m_t_r_b_Box ul:hover{
              overflow-y: auto;
            }

            .bor_r{
              border-right: 1px solid #f0f0f0;
            }
          }
        }
      }
      .c_m_bot{
        padding:7px 10px;
        display: flex;
        flex-direction: row-reverse;
        .c_m_bot_btn{
          background-color: #f47920;
          color: #fff;
          font-size: 14px;
          cursor: pointer;
          height: 30px;
          line-height: 30px;
          padding: 0 10px;
          border-radius: 3px;
        }
      }
    }
  }
</style>
